<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edga"/>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp"></script>
<script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style>
html , body{margin:0px;padding:0px;width:100%;height:100%;}
#app{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;}
</style>
</head>
<body>
<div id="app"></div>
<img id="img" src="" style="display:block;position:absolute;top:0;left:0;"/>
</body>
<script>

var map = new TMap.Map("app", {
        viewMode: "2D",
		//baseMap:null,// 传入null 不显示任何地物 默认为 VectorBaseMap
        zoom: 14, //设置地图缩放级别
        center: new TMap.LatLng(30.965171,116.863709) //设置地图中心点坐标
      });


map.on("click", function(evt) {
		//console.log(evt)
        var lat = evt.latLng.getLat().toFixed(6);
        var lng = evt.latLng.getLng().toFixed(6);
		var str = lat+','+lng
		console.log(str)
      });
	  

var list=[
	"30.974367,116.852984",
	"30.972381,116.862679",
	"30.968850,116.867742",
	"30.960389,116.868342",
	"30.953766,116.861821",
	"30.958623,116.854442",
	"30.948174,116.853842",
	"30.946849,116.862851",
	"30.963847,116.875635"
	
]	  
	console.log
var markerList=[];	
	
	for(var i=0;i<list.length;i++){
		var latlng = list[i].split(",");
		console.log(latlng)
		var geometries={
                "id": "marker"+i,
                "styleId": 'marker',
                "position": new TMap.LatLng(latlng[0], latlng[1]),
                "properties": {
                    "title": "marker1"
                }
            }
		var src1="https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png"
		var marker = new TMap.MultiMarker({
            id: 'marker-layer'+i,
            map: map,
            styles: {
                marker: new TMap.MarkerStyle({
                    width: 25,
                    height: 35,
                    anchor: { x: 16, y: 32 },
                    src: src1
                })
            },
            geometries: [geometries]
		})
		markerList.push(marker)
		
		}  
	  console.log(markerList[0])
	  setTimeout(function(){
		 markerList[0].setStyles({marker: new TMap.MarkerStyle({
                width: 70,
                height: 70,
				anchor: { x: 16, y: 32 },
                src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png",
                opacity: 0.5
            	})
			})
	  },2000)
	  
	  /*var marker = new TMap.MultiMarker({
                id: 'marker-layer0',
                map: map,
                styles: {
                    "marker": new TMap.MarkerStyle({
                        "width": 25,
                        "height": 35,
                        "anchor": { x: 16, y: 32 },
                        "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                    })
                },
                geometries: [{
                    "id": 'demo0',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(30.974367,116.852984),
                    "properties": {
                        "title": "marker"
                    }
                }]
            });  
        
        function setStyle(){
            //更换marker样式方法
            marker.setStyles({"marker": new TMap.MarkerStyle({
                "width": 70,
                "height": 70,
                "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png',
                "opacity": 0.5
            })})
        }
		
		setTimeout(function(){
			setStyle()
			},3000) */
</script>
</html>